<template>
    <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-between zs-space-top-sm">
        <template v-for="(item, index) in legendList" :key="index">
            <img class="legend-img zs-space-right-sm" :src="getUrl(item.imgUrl)">
            <div class="zs-text-sm zs-text-gray-dark zs-space-right">{{item.text}}</div>
        </template>
        <img class="legend-img zs-space-right-sm" :src="getUrl('bar')" v-if="props.barText.length > 0">
        <div class="zs-text-sm zs-text-gray-dark zs-space-right" v-if="props.barText.length > 0">{{props.barText}}</div>
        <img class="legend-img zs-space-right-sm" :src="getUrl('line')" v-if="props.lineText.length > 0">
        <div class="zs-text-sm zs-text-gray-dark zs-space-right" v-if="props.lineText.length > 0">{{props.lineText}}</div>
        <img class="legend-orange-img zs-space-right-sm" :src="getUrl('orange')" v-if="props.barOrangeText.length > 0">
        <div class="zs-text-sm zs-text-gray-dark zs-space-right" v-if="props.barOrangeText.length > 0">{{props.barOrangeText}}</div>

        <div class="zs-text-sm zs-text-gray-dark zs-space-right-sm" v-if="props.unitText.length > 0">{{props.unitText}}</div>
        <div class="zs-layout-grow zs-layout-flex-row zs-layout-justify-end zs-text-sm zs-text-gray">{{props.updateText}}</div>
    </div>
</template>

<script setup>

const props = defineProps({
    legendList:{
        type: Array,
        required: false,
        default: () => { return [] }
    },
    lineText: {
        type: String,
        required: false,
        default: ''
    },
    barText: {
        type: String,
        required: false,
        default: ''
    },
    barOrangeText: {
        type: String,
        required: false,
        default: ''
    },
    unitText: {
        type: String,
        required: false,
        default: ''
    },
    updateText: {
        type: String,
        required: false,
        default: ''
    }
})

const getUrl = (url) => {

    if(url == 'bar') {
        return 'https://file.crehopson.com/DEFAULT/image/2023-04-13/ad2f3f8f9a51375d9254bca2381ecb70.png'
    }
    if(url == 'line') {
        return 'https://file.crehopson.com/DEFAULT/image/2023-04-13/e249c9ef9b653b1c98312c33c7e6df35.png'
    }
    if(url == 'orange') {
        return 'https://file.crehopson.com/DEFAULT/image/2024-03-20/6d1d2f0b566e31b18cf595f7e648418a/orange.png'
    }

    if(url == 'gray') {
        return 'https://file.crehopson.com/DEFAULT/image/2024-08-20/a48b0434c6483c5c960022cc5cfc33ec/gray.png'
    }
    if(url == 'green') {
        return 'https://file.crehopson.com/DEFAULT/image/2024-08-20/097be6f4ec9f3533bccce607467edaab/green.png'
    }
    if(url == 'red') {
        return 'https://file.crehopson.com/DEFAULT/image/2024-08-20/b7734c70d79e3d8c9cd9367f31d27111/red.png'
    }
    return url
}
</script>

<style scoped lang="scss">
.legend-img {
    width: 18px;
    height: 18px;
}
.legend-orange-img{
    width: 18px;
}
</style>
